<template>
  <div class="step-wrapper flex justify-center">
    <div :class="['step-item', 'flex', 'justify-center', step.active ? 'active' : '']" v-for="step in stepList" :key="step">
      <a-space size="10">
        <div class="step-item-number">{{ step.stepNum }}</div>
        <div class="step-item-text">{{ step.stepText }}</div>
        <div class="step-item-icon"><icon-right /></div>
      </a-space>
    </div>
  </div>
</template>
<script setup>
  defineProps({
    stepList: Array,
  })
</script>
<style lang="less" scoped>
  .step-wrapper {
    margin: 10px 0 20px;
    .step-item {
      width: 273px;
      line-height: 28px;
      border-bottom: 2px solid transparent;
      padding-bottom: 16px;
      margin: 0 20px;
      .step-item-number {
        width: 28px;
        height: 28px;
        background: #f2f3f5;
        border-radius: 32px;
        color: #4e5969;
        text-align: center;
        line-height: 28px;
      }
      .step-item-text {
        font-size: 16px;
        color: #4e5969;
      }
      .step-item-icon {
        color: #c9cdd4;
      }
      &.active {
        border-bottom-color: rgb(var(--primary-6));
        .step-item-number {
          background: rgb(var(--primary-6));
          color: #fff;
        }
        .step-item-text {
          font-weight: 600;
          color: #1d2129;
        }
      }
    }
  }
</style>
